// 重置element-ui的部分样式

// NavMenu
.el-menu,
.el-menu-item {
  border: 0 none !important;
}
// 顶部导航子导航样式设置-可参考左侧导航设置
.el-menu--popup {
  background-color: @background-color-lighter !important;
  color: @color-text-regular !important;
  text-align: left;
  .el-menu-item,
  .el-sub-menu__title {
    background-color: @background-color-lighter !important;
    &:hover,
    &:hover * {
      color: rgba(65, 178, 255, 0.8) !important;
    }
  }
  .el-menu-item.is-active,
  .el-sub-menu.is-active > .el-sub-menu__title * {
    color: @color-primary !important;
  }
}

// Button
.el-button {
  color: white !important;
}
.el-button--small {
  padding: 5px 10px !important;
}
.el-button.is-disabled,
.el-button.is-disabled:focus,
.el-button.is-disabled:hover {
  background-color: @color-text-placeholder !important;
  border-color: @color-text-placeholder !important;
}

// Card
.el-card {
  border: 1px solid @color-black !important;
  background-color: @background-color-base-opacity !important;
}

// Form
.el-form-item {
  display: flex;
}
.el-form-item.is-required::before {
  position: absolute;
  margin-top: 13px;
  left: 24px;
  color: @color-danger;
  font-size: 20px;
  font-weight: bold;
  content: '*';
}
.el-form-item__label {
  &::before {
    display: none;
  }
  .tj !important;
}
.el-input__inner {
  background-color: @color-black;
}
.el-form-item__content {
  flex: 1;
}

// Dialog
.el-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2000;
  height: 100%;
  background-color: rgba(11, 11, 12, 0.6) !important;
  overflow: auto;
}
.el-dialog {
  background-color: @color-black;
}
.el-dialog__title {
  .dinlineb;
  width: calc(~'100% - 30px');
  height: 24px;
  font-size: 16px !important;
  font-weight: bold !important;
  line-height: 16px !important;
  color: @color-text-regular !important;
  .ellipsis;
  .tc;
}
.el-dialog__close {
  top: 22px !important;
  font-size: 25px !important;
}
.el-dialog__header {
  padding: 30px 30px 0 30px !important;
}
.el-dialog__body {
  padding: 30px 30px 0 40px !important;
}
.el-dialog__footer {
  padding: 10px 30px 30px 30px !important;
  text-align: right !important;
  .el-button + .el-button {
    margin-left: 20px !important;
  }
}

// Drawer
.el-drawer__header {
  padding: 15px 20px;
  margin: 0;
  background-color: @color-primary;
  .el-dialog__close {
    color: @color-text-regular;
    &:hover {
      color: @color-text-primary;
    }
  }
}
.el-drawer__title {
  width: calc(~"100% - 30px");
  color: @color-text-primary;
  font-size: 16px !important;
  font-weight: bold !important;
  text-align: left !important;
}
.el-drawer__body {
  padding: 20px;
  background-color: @color-text-primary;
  color: @color-black-lighter;
  line-height: 25px;
}

// Table
.el-table {
  font-size: 12px !important;
  background-color: @background-color-base-opacity !important;
  &:before {
    height: 0 !important;
  }
  .cell {
    padding-left: 15px !important;
  }
  thead {
    color: @background-color-lighter !important;
  }
  th {
    background: @color-black-lighter !important;
    color: @color-text-regular;
    font-size: 14px;
  }
  tr {
    background-color: @color-black;
  }
  col[name='gutter'] {
    display: table-cell;
  }
}
.el-table th > .cell {
  padding-left: 15px !important;
}
.el-table__header tr,
.el-table__header th {
  padding: 0 !important;
  height: 40px;
}
.el-table__body tr,
.el-table__body td {
  padding: 0 !important;
  height: 40px;
}
.el-table td,
.el-table th.is-leaf {
  border-bottom: 0 !important;
}

.el-table--striped .el-table__body tr.el-table__row--striped.el-table__row--striped.el-table__row--striped td {
  background-color: @background-color-base-opacity !important;
}
.el-table__header-wrapper {
  height: 40px;
}
.el-table__body-wrapper {
  .wfull;
  height: calc(100% - 50px) !important;
  overflow: auto !important;
}
.el-table__empty-block {
  font-size: 0;
  .box--empty;
}
tr .el-table__expanded-cell {
  height: 200px;
  .pd20 !important;
  background-color: @background-color-expand;
  font-size: 13px;
  line-height: 25px;
}
.expanded-item-label {
  display: inline-block;
  width: 110px;
  .mgr5;
  text-align: right;
}

// Divider
.el-divider__text.is-center {
  padding: 5px 10px;
  color: @color-info;
  font-size: 14px;
}

// Checkbox
.el-checkbox__inner {
  background-color: @color-text-regular !important;
}
.el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: @color-primary !important;
  border-color: @color-primary !important;
}

// Message
.el-message {
  height: 48px;
}
.message(@bgColor, @bdColor) {
  top: 80px !important;
  background-color: @bgColor !important;
  border-color: @bdColor !important;
  border-radius: 5px !important;
}
.el-message__icon,
.el-message__content {
  color: @color-text-primary !important;
}
.el-message--success {
  .message(@color-success, @color-success);
}
.el-message--error {
  .message(@color-danger, @color-danger);
}
.el-message--warning {
  .message(@color-warning, @color-warning);
}

// v-loading
.el-loading-mask {
  background-color: @background-color-base-opacity !important;
}

// Tooltip
.el-tooltip__popper {
  max-width: 400px;
  background: @color-black-lighter !important;
  color: @color-text-primary !important;
  border: 1px solid @color-text-primary;
  > p {
    max-height: 400px;
    overflow: auto;
  }
  .popper__arrow:after {
    border-top-color: @color-black-lighter !important;
  }
}

// DatePicker
.el-date-picker__time-header,
.el-picker-panel__footer,
.el-time-panel__footer {
  border-color: @background-color-light;
}
.el-date-picker__header-label {
  font-size: 14px;
}
.el-picker-panel {
  border: 0 none;
}
.el-picker-panel,
.el-picker-panel__footer {
  background-color: @color-black;
}

// Popover + DropdownMenu
.el-popper,
.el-dropdown-menu,
.el-popper.is-light .el-popper__arrow::before {
  background-color: @color-black !important;
}
.el-popper {
  border-color: @color-black-lighter !important;
}
.el-dropdown-menu {
  position: relative;
  margin: 0;
  border: 0 none;
}
.el-popper.is-light .el-popper__arrow::before {
  border-top-color: @color-black-lighter !important;
  border-left-color: @color-black-lighter !important;
}
